<template>
  <div class="loginBox">
    <div class="loginContainer">
      <!--左边box-->
      <div class="leftBox">
        <div class="leftTitle">关注就业   提前准备</div>
        <div class="leftContentBox">
          <span class="title">这里有 </span>
          <span class="content">企业信息推荐，帮你入职</span>
        </div>
        <div class="leftContentBox">
          <span class="title">这里有 </span>
          <span class="content">面试经验分享，帮你过关</span>
        </div>
        <div class="leftContentBox">
          <span class="title">这里有 </span>
          <span class="content">毕业师兄师姐在线，帮你答疑</span>
        </div>
      </div>
      <!--右边box-->
      <div class="rightBox">
        <div class="btnGroup">
          <div class="whiteBox" :class="{whiteBoxTransform: !isLogin,whiteBoxTransformLeft:isLogin}"></div>
          <div class="loginSpan" @click="loginBtnClick" :class="{colorGreen: isLogin}">登录</div>
          <div class="regSpan" @click="regBtnClick" :class="{colorGreen: !isLogin}">注册</div>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef">
          <el-form-item prop="name">
            <el-input v-model="form.name" :placeholder="isLogin?'请输入用户名':'请输入长度至多为10位的用户名'"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" :placeholder="isLogin?'请输入密码':'请输入长度至少为6位的密码'"></el-input>
          </el-form-item>
          <el-form-item v-if="!isLogin" prop="confirmPassword">
            <el-input type="password" placeholder="请确认密码" v-model="form.confirmPassword"></el-input>
          </el-form-item>
        </el-form>
          <el-checkbox v-if="isLogin" v-model="remember" class="rememberUser">记住用户</el-checkbox>
        <el-button @click="toLogin" :disabled="isLogin?!(this.form.name&& this.form.password):!(this.form.name&& this.form.password && this.form.confirmPassword)" class="loginBtn" type="danger">{{this.status==='login'?'登录':'注册'}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var confirmPassword = (rule, value, cb) => {
      if (value !== this.form.password) {
        return cb(new Error('请保证密码和上面输入的一致!'))
      } else {
        cb()
      }
    }
    return {
      status: 'login',
      isLogin: true,
      form: {
        name: '',
        password: '',
        confirmPassword: ''
      }, // 表单对象
      rules: {
        name: [ { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 10, message: '长度最多为10个字符', trigger: 'blur' }],
        password: [ { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15个字符之间', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请确认输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15个字符之间', trigger: 'blur' },
          {validator: confirmPassword, trigger: 'blur'}]
      },
      remember: false
    }
  },
  methods: {
    loginBtnClick () {
      this.status = 'login'
      if (!this.isLogin) {
        this.$refs.formRef.resetFields()
        this.confirmPassword = ''
      }
      this.isLogin = true
    },
    regBtnClick () {
      this.status = 'reg'
      if (this.isLogin) {
        this.$refs.formRef.resetFields()
      }
      this.isLogin = false
    },
    toLogin () {
      this.$refs.formRef.validate(val => {
        if (val) {
          if (this.isLogin) {
            let { name, password } = this.form
            this.$http.post('login', {name, password}).then((res) => {
              this.$message.success('登陆成功！')
              window.sessionStorage.setItem('token', res.data.token)
              window.localStorage.setItem('token', res.data.token)
              window.sessionStorage.setItem('userInfo', JSON.stringify(res.data.user))
              window.localStorage.setItem('userInfo', JSON.stringify(res.data.user))
              this.$bus.$emit('login')
              this.$router.replace('/home')
              if (this.remember) {
                window.localStorage.setItem('user', JSON.stringify({name: this.form.name, password: this.form.password}))
              } else {
                window.localStorage.getItem('user') && window.localStorage.removeItem('user')
              }
            }).catch(({response}) => {
              console.log(response)
              if (response.data === '密码不正确~') {
                this.$message.error('密码不正确!')
              } else if (response.data === '用户不存在~') {
                this.$message.error('用户不存在,请前往注册!')
              } else {
                this.$message.error('登陆失败！')
              }
            })
          } else {
            let { name, password } = this.form
            this.$http.post('users', {name, password}).then(() => {
              this.isLogin = true
              this.$refs.formRef.resetFields()
              this.$message.success('注册成功，前往登录！')
            }).catch(({response}) => {
              if (response.status === 409) {
                this.$message.error('注册失败！用户已经存在,请使用密码登录！')
                this.isLogin = true
                this.$refs.formRef.resetFields()
              } else {
                this.$message.error('注册失败！')
              }
            })
          }
        }
      })
    }
  },
  created () {
    console.log(1)
    if (window.localStorage.getItem('user')) {
      this.form = JSON.parse(window.localStorage.getItem('user'))
    }
    if (window.sessionStorage.getItem('token')) {
      this.$router.replace('/home')
    }
    this.$store.commit('setChoose', '')
  }
}
</script>

<style scoped>
.loginBox{
  position: relative;
  height: 600px;
  background-color: #eee;
}
.loginContainer{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    overflow: hidden;
    width: 700px;
    height: 500px;
    display: flex;
  }
  .leftBox{
    width: 250px;
    height: 500px;
    background-color: rgba(106, 154, 241, 0.9);
  }
  .rightBox{
    width: 450px;
    height: 500px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btnGroup{
    position: relative;
    background-color: #eee;
    width: 150px;
    height: 40px;
    margin-top: 50px;
    line-height: 40px;
    display: flex;
    border-radius: 5px;
  }
  .whiteBox{
    position: absolute;
    width: 70px;
    background-color: #fff;
    height: 30px;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 2px;
  }
  .loginSpan,.regSpan{
    position: relative;
    z-index: 10;
    width: 50%;
    text-align: center;
    cursor: pointer;
  }
  .whiteBoxTransform{
    transform: translate(70px);
    transition: transform 0.3s linear;
  }
  .whiteBoxTransformLeft{
    transform: translate(0);
    transition: transform 0.3s linear;
  }
  .colorGreen{
    color: #32ca99;
  }
  .el-form{
    margin-top: 30px;
  }
  .el-input{
    width: 300px;
  }
  .el-checkbox{
    right: 20px;
    align-self: flex-end;
    margin-right: 50px;
  }
  .loginBtn{
    width: 300px;
    border-radius: 20px;
  }
  .rememberUser{
    margin-bottom: 10px;
  }
  .leftBox div{
    margin: 30px 0;
  }
  .leftBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
  }
  .leftBox .leftTitle{
    color: #2f363d;
    font-size: 18px;
    font-weight: 700;
  }
  .leftContentBox{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .leftContentBox .title{
    color: #32ca99;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .leftContentBox .content{
    color: #c3c3c6;
    font-size: 14px;
  }
</style>
